<template>
   <el-row class="container">
    <el-col :span="24" class="header">
      <aside class="logo">
         <img src="../assets/logo.png">
         <h1>商户管理</h1>
      </aside>
      <section :class="[isCollapse ? 'conten-header-close' : '','conten-header']">
         <el-col :span="24" class="breadcrumb-container">
            <el-col :span="19" style="padding: 0;">
              <div class="grid-content bg-purple titlename">
                  <span class="menuIcon" v-if="isCollapse" @click="toggleCollapse"><img src="../assets/icon/open.png"  /></span>
                  <span class="menuIcon" v-if="!isCollapse" @click="toggleCollapse"><img src="../assets/icon/close.png"  /></span>
                </div>
            </el-col>
            <el-col :span="5" style="padding: 0; height: 60px;">
                <span class="logoutIco" @click="logout()"><img src="../assets/icon/logout.png"><span style="display:inline-block;color: #000;">退出</span></span>
            </el-col>
         </el-col>

      </section>

    </el-col>
    <el-col :span="24" class="main" >
    	
    <aside class="test1">
        <div class="grid-content bg-purple">
          <img src="../assets/user-header.png"/>
          <el-dropdown trigger="click">
            <span class="userinfo-inner">{{infoForm.phone}}<i class="el-icon-caret-bottom"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-show="false">我的消息</el-dropdown-item>
                <el-dropdown-item @click.native="centerDialogVisible=true">个人资料</el-dropdown-item>
                <el-dropdown-item divided @click.native="changePassword">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </div>
       <el-menu :default-active="$route.path"   :collapse="isCollapse"
       unique-opened router class="el-menu-vertical-demo" style="backgroundColor: #1190d6;">

					<template v-for="(item,index) in menuList " style="width: 16.6;">
						<!--滚动元素--	<el-scrollbar >-->
						<!--<el-scrollbar style="width: 100%;">-->
						<el-submenu v-if="item.children && item.children.length" :index="index+''">

							<template slot="title">{{item.permissionName}}</template>
							<el-menu-item v-for="(node,i) in item.children" :key="node.permissionUrl" :index="node.permissionUrl"  >
              {{node.permissionName}}</el-menu-item>

						</el-submenu>
						<el-menu-item v-else :index="item.permissionUrl" style="backgroundColor: #8BD0F1">{{item.permissionName}}</el-menu-item>

						<!--</el-scrollbar>-->
					</template>

				</el-menu>
         
      </aside>
    
      <!--右侧-->
      
      <section :class="[isCollapse ? 'content-container-close' : '','content-container']">


       <el-col :span="24" class="breadcrumb-container">
				<strong class="title">{{$route.name}}</strong>
					<el-breadcrumb separator="/" class="breadcrumb-inner">
						<el-breadcrumb-item v-for="item in $route.matched" :key="item.name">
							{{ item.name }}
						</el-breadcrumb-item>
					</el-breadcrumb> 
				</el-col>
				<el-col :span="24" class="content-wrapper">
					<transition name="fade" mode="out-in">
						<router-view></router-view>
					</transition>
				</el-col>
      </section>
      <ml-change-password ref="changePassword"></ml-change-password>
      <el-dialog
          title="个人资料"
          :visible.sync="centerDialogVisible"
          width="40%" center>
          <el-form :model="infoForm">
            <el-row>
                <el-col :span="12" style="text-align:right;">
                  <p style="line-height: 40px;">登录名:</p>
                  <p style="line-height: 40px;">名称:</p>
                  <p style="line-height: 40px;">邮箱:</p>
                  <p style="line-height: 40px;">联系电话:</p>
                  <p style="line-height: 40px;">上次登陆IP:</p>
                  <p style="line-height: 40px;">上次登陆时间:</p>
                </el-col> 
                <el-col :span="12" style="text-align:left;">
                  <p style="height: 40px;line-height: 40px;">{{infoForm.nickname}}</p>
                  <p style="height: 40px;line-height: 40px;">{{infoForm.companyName||''}}</p>
                  <p style="height: 40px;line-height: 40px;">{{infoForm.email}}</p>
                  <p style="height: 40px;line-height: 40px;">{{infoForm.phone}}</p>
                  <p style="height: 40px;line-height: 40px;">{{infoForm.IP ||''}}</p>
                  <p style="height: 40px;line-height: 40px;">{{infoForm.logTime ||''}}</p>
                </el-col> 
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
      </el-dialog>
      <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="loading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
      </transition>
    </el-col>
  </el-row>
</template>
<script>
import DataUtil from "../common/dataUtil";
import mlChangePassword from "../components/_changePassword.vue";
import {getUserList } from "@/api";
export default {
  data() {
    return {
      loading : true,
      infoForm : '',
      centerDialogVisible : false,
      userUuid: DataUtil.uuid(),
      isCollapse: false,
      menuList: [
        {
          permissionName: "商户管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "商户列表",
              permissionUrl: "/userList"
            },
            {
              permissionName: "商户白名单",
              permissionUrl: "/userWhiteList"
            },
            {
              permissionName: "商户密钥",
              permissionUrl: "/userKeys"
            },
          ]
        },
        {
          permissionName: "资产管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "商户订单",
              permissionUrl: "/MerchantOrders"
            },
            {
              permissionName: "商户资产",
              permissionUrl: "/MerchantAssets"
            },
            // {
            //   permissionName: "商户流水",
            //   permissionUrl: "/MerchantFlow"
            // },
            {
              permissionName: "资产申请",
              permissionUrl: "/MerchantApply"
            },
          ]
        },
      ],

    };
  },
  methods: {
    changePassword() {
      this.$refs.changePassword.show();
    },
    //退出登录
    logout() {
      this.$confirm("确认退出登录吗?", "提示", {})
        .then(() => {
          DataUtil.sid("");
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    toggleCollapse() {
      if(!this.isCollapse){
          this.isCollapse = !this.isCollapse;
      }else{
          this.isCollapse = false;
      }
      
    },
        //退出登录
    logout() {
      this.$confirm("您确定退出系统吗？", "提示", {})
        .then(() => {
          DataUtil.sid("");
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    pageInit() {
      this.infoForm = JSON.parse(DataUtil.userInfo());
    },
    openFullScreen() {
        setTimeout(() => {
          this.loading = false;
        }, 300);
    },
  },
  created() {
    this.pageInit();
  },

  mounted() {
    this.openFullScreen();
  },
  components: {
    mlChangePassword
  }
};
</script>

<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.menuIcon{
  display: inline-block;
    border: 1px solid #000;
    height: 30px;
    margin: 20px;
}
.menuIcon:hover{
      background: #ccc;
}
.menuIcon img{
    width: 25px;
    margin: 0px 3px 5px 3px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    color: #000;
    .logo {
      /*min-width: 200px;*/
      max-width: 200px;
      height: 100%;
      background-color: #10a2e9;
      img{
        width: 40px;
        background-color: #e4e4e4;
        margin: 0 5px -15px 15px;
        border-radius: 50%;
        box-shadow: 1px 2px 6px rgba(0,0,0,.03);
      }
      img:hover{
          transform: rotateY(-360deg);
          transition-property: all;
          transition-duration: 0.5s;
          transition-timing-function: ease-in-out;
          transition-delay: initial;
      }
      h1 {
        display: inline-block;
        vertical-align: -5px;
        color: #fafafa;
        font-size: 23px;
      }
      @keyframes masked-animation {
        0% {
          background-position: 0 0; /* background-position 属性设置背景图像的起始位置。 */
        }
        100% {
          background-position: -100% 0;
        }
      }
    }
    .conten-header {
      position: absolute;
      right: 0px;
      top: 0px;
      bottom: 0px;
      left: 200px;
      background: #fff;
      transition: left .7s;
      .breadcrumb-container {
        margin-bottom: 15px;
          .logoutIco{
            float:right;
            margin-left: 24px;
            color: #fff;
            cursor: pointer;
            margin-right:20px; 
          img{
              display: inline-block;
              width: 15px;
              margin-bottom: -3px;
              margin-right: 5px;
          }
        }
      }
    }
    .conten-header-close{
        left:0px;
        transition: left .5s ;
    }
  }
  .main {
    background: #2d3e50;
    position: absolute;
    top: 60px;
    bottom: 0px; /* overflow: hidden; */
    // 覆盖默认滚动条样式
    .test1::-webkit-scrollbar {
      width: 0px;
      height: 8px;
    }
    .test1::-webkit-scrollbar-track {
      opacity: 0;
      transition: opacity 0.12s ease-out;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    .test1::-webkit-scrollbar-thumb {
      /* background-color: rgb(178, 177, 176); */
      background-color: #1190d6;
      /* opacity: 0; */
      transition: background-color 0.3s;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    aside.test1 {
      width: 200px;
      overflow-y: scroll;
      height: 100%;
      background-color: #1190d6;
      .bg-purple {
          /* background: #d3dce6; */
          text-align: left;
          font-size: 26px;
          font-weight: 700;
          margin: 0;
          color: #fff;
          // background-color: #0062ad;
        img {
          width: 88px;
          height: 88px;
          border-radius: 50%;
          margin:10px 0 0px 60px;
          background: rgb(234, 245, 249);
          display: block;
        }
        }
          
        .span {
          display: block;
          margin: 0 auto;
        }
        .userinfo {
          text-align: right;
          padding-right: 2%;
        }

        .userinfo-inner {
          display: block;
          color: #fff;
          text-align: center;
          cursor: pointer;
          padding-left: 55px;
        }
    }
    .content-container {
      background: #f1f2f7;
      position: absolute;
      right: 0px;
      top: 0px;
      bottom: 0px;
      left: 200px;
      overflow-y: scroll;
      padding: 20px;
      transition: left .7s ;
      .breadcrumb-container {
        margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
    .content-container-close{
       left:0px;
       transition: left .5s ;
    }
  }
}


.el-menu-item.is-active ,.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    color: #ffffff;
    background: #0e76af;
}


</style>
